<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Preview your Markdown content</title>
<!-- my.css为项目中的自定义样式 -->
<link rel="stylesheet" href="css/my.css">
<!-- 预览Editor.md必须引入以下一些资源，注意这里的css样式不同于编辑器页的css -->
<link rel="stylesheet" href="plugin/editormd/css/editormd.preview.css">
<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="plugin/editormd/lib/marked.min.js"></script>
<script type="text/javascript" src="plugin/editormd/lib/prettify.min.js"></script>
<script type="text/javascript" src="plugin/editormd/lib/raphael.min.js"></script>
<script type="text/javascript"
	src="plugin/editormd/lib/underscore.min.js"></script>
<script type="text/javascript"
	src="plugin/editormd/lib/sequence-diagram.min.js"></script>
<script type="text/javascript"
	src="plugin/editormd/lib/flowchart.min.js"></script>
<script type="text/javascript"
	src="plugin/editormd/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript" src="plugin/editormd/editormd.min.js"></script>

</head>
<body>
	<div class="container" style="height: auto; width: 50%;">
		<div class="header">
			<h2>Transfer and show your content!</h2>
		</div>
		<div class="footer">
			<div id="view-editormd"></div>
		</div>
	</div>
	<script type="text/javascript" th:inline="javascript">
		var testEditormdView;

		$(function() {
			testEditormdView = editormd.markdownToHTML("view-editormd", {
				markdown : [[${article}]],//+ "\r\n" + $("#append-test").text(),
				//htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
				htmlDecode : "style,script,iframe", // you can filter tags decode
				//toc             : false,
				tocm : true, // Using [TOCM]
				//tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
				//gfm             : false,
				//tocDropdown     : true,
				// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
				emoji : true,
				taskList : true,
				tex : true, // 默认不解析
				flowChart : true, // 默认不解析
				sequenceDiagram : true, // 默认不解析
			});
		});
	</script>
</body>
</html>